<template>
  <!-- 商品渠道组件 -->
  <div>
    <el-form :model="form" label-width="170px" ref="form" :rules="rules" style="margin-top: -12px;">
      <el-form-item label="渠道设置" label-width="130px" class="one-label">

        <!-- 跨境类型 -->
        <el-form-item label="跨境类型：" prop="crossBorderType" v-if="enterpriseConfig.crossBorderBusinessFlag === 1">
          <el-radio-group v-model="form.crossBorderType" @change="doChangeCrossBorderType" :disabled="form.isDisabledSelCrossBorderType === '1'">
            <template v-for="(val, key) in dict.crossBorderType">
              <el-radio :label="key" :key="key">{{ val }}</el-radio>
            </template>
          </el-radio-group>
          <div class="tips mar-b-5">跨境商品不支持选品小程序以及抖音、快手、淘宝平台</div>
          <div v-if="form.crossBorderType === '2'">
            <div>
              <el-radio-group v-model="form.crossBorderLabelType" class="vertical-radio">
                <template v-for="(val, key) in dict.crossBorderLabelType">
                  <el-radio :label="key" :key="key">标签显示为“{{ val }}”</el-radio>
                </template>
              </el-radio-group>
            </div>
            <div v-if="form.goodsSource != 3">
              <span>海关商品编码(HS)：</span>
              <el-select v-model="form.customsGoodsCodeId"
                placeholder="请输入编码或名称"
                class="width-300"
                filterable
                remote
                clearable
                @clear="remoteMethod"
                :remote-method="remoteMethod"
                :loading="selectLoading"
                :disabled="form.isDisabledSelCrossBorderType === '1'">
                <el-option v-for="item in customsGoodsCodeData"
                  :key="item.codeId"
                  :label="item.title ? item.code + '（' + item.title + '）' : item.code"
                  :value="item.codeId">
                </el-option>
              </el-select>
              <template v-if="form.isDisabledSelCrossBorderType === '0'">
                <a class="font-blue mar-l-10" href="javascript:void(0)" @click="handleAddCustomsGoodsCode">添加编码</a>
              </template>
            </div>
          </div>
        </el-form-item>

        <!-- 私域平台 -->
        <el-form-item label="私域平台：" v-if="fromListPage === 30">
          <div v-if="enterpriseConfig.communityDistributionAuthority == 1">
            <el-checkbox v-model="checkedStoreApp" @change="doChangeAuthority()">云店小程序</el-checkbox>
            <span class="mar-l-5 tips">（勾选并保存在云店小程序中显示销售）</span>
          </div>

          <div v-if="enterpriseConfig.anchorSelectionAuthority == 1 && form.crossBorderType === '1' && form.goodsSource !== '3'">
            <el-checkbox v-model="checkSelectionGoods" @change="doChangeAuthority()">选品小程序</el-checkbox>
            <span class="mar-l-5 tips">（勾选并保存在选品小程序中显示销售）</span>
          </div>

          <div v-if="enterpriseConfig.liveAuthority == 1">
            <el-checkbox v-model="checkShopApp" @change="doChangeAuthority()">小程序直播</el-checkbox>
            <span class="mar-l-5 tips">（勾选并保存上架后需前往直播商品库提交微信审核）</span>
          </div>
        </el-form-item>

        <!-- 公域平台 -->
        <el-form-item label="公域平台：" v-if="enterpriseConfig.platformAuthority == 1 && form.crossBorderType === '1'">
          <template v-if="fromListPage === 30">
            <div>
              <el-checkbox v-model="checkedTikTok" @change="doChangeAuthority()">抖音小店</el-checkbox>
              <el-input type="text" size="mini" class="width-300 mar-l-20" v-model.trim="form.tiktokGoodsUrl" placeholder="该商品上架到抖店的商品链接"></el-input>
            </div>
            <div>
              <el-checkbox v-model="checkedQuick" @change="doChangeAuthority()">快手小店</el-checkbox>
              <el-input type="text" size="mini" class="width-300 mar-l-20" v-model.trim="form.quickGoodsUrl" placeholder="该商品上架到快手的商品链接"></el-input>
            </div>
            <div>
              <el-checkbox v-model="checkedTaobao" @change="doChangeAuthority()">淘宝直播</el-checkbox>
              <el-input type="text" size="mini" class="width-300 mar-l-20" v-model.trim="form.taobaoGoodsUrl" placeholder="该商品上架到淘宝的商品链接"></el-input>
            </div>
            <div>
              <el-checkbox v-model="checkedPinDuoDuo" @change="doChangeAuthority()">拼多多</el-checkbox>
              <el-input type="text" size="mini" class="width-300 mar-l-20" v-model.trim="form.pinDuoDuoGoodsUrl" placeholder="该商品上架到拼多多的商品链接"></el-input>
            </div>
          </template>

          <template v-else>
            <div>
              <el-checkbox v-model="checkedOpenAlibaba" @change="doChangeAuthority()">1688</el-checkbox>
            </div>
          </template>
        </el-form-item>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { pageCustomsGoodsCode } from '@/api/goods/customsGoodsCode'

  import goodsBus from '@/views/goods/edit/goods-bus'

  export default {
    mixins: [goodsBus],
    props: {
      // 跳转源 30：零售 31：批发
      fromListPage: {
        type: Number,
        default: 30
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    data() {
      // 跨境类型规则
      const crossBorderTypeRule = (rule, value, callback) => {
        if (this.enterpriseConfig.crossBorderBusinessFlag === 1) {
          if (!this.form.crossBorderType) {
            return callback(new Error('请选择跨境类型'))
          }
          if (this.form.crossBorderType === '2' && this.form.goodsSource !== '3') {
            if (!this.form.customsGoodsCodeId) {
              return callback(new Error('请选择海关商品编码'))
            }
          }
        }
        callback()
      }
      return {
        // 表单
        form: {
          selectionGoodsType: 0, // 加入选品库
          storeAppGoodsType: 1, // 加入云店
          anchorPlatformShopType: 1, // 小程序直播
          tiktokAuthority: 0, // 抖音小店和快手小店权限
          quickAuthority: 0, // 快手权限
          taobaoAuthority: 0, // 淘宝权限
          pinDuoDuoAuthority: 0, // 拼多多权限
          openAlibabaAuthority: 0, // 1688权限
          tiktokGoodsUrl: '', // 抖店商品链接
          quickGoodsUrl: '', // 快手商品链接
          taobaoGoodsUrl: '', // 淘宝商品链接
          pinDuoDuoGoodsUrl: '', // 拼多多商品链接
          crossBorderType: '1', // 跨境类型
          crossBorderLabelType: '1', // 跨境标签类型：1：跨境保税 2：海外直邮
          customsGoodsCodeId: '', // 海关商品编码id
          isDisabledSelCrossBorderType: '0', // 是否禁用选择跨境类型：0-false，1-true
          goodsSource: '0' // 商品来源 0企业 1供应商 2淘宝商品 3供货联盟
        },
        // 表单规则
        rules: {
          crossBorderType: [
            { required: true, trigger: 'change', validator: crossBorderTypeRule }
          ]
        },
        // 数据字典
        dict: {
          crossBorderType: {},
          crossBorderLabelType: {}
        },
        // 企业配置
        enterpriseConfig: {
          anchorSelectionAuthority: 0, // 主播选品
          platformAuthority: 0, // 平台对接
          liveAuthority: 0, // 店播增值功能
          crossBorderBusinessFlag: 0 // 增值功能跨境业务
        },
        // 下拉loading
        selectLoading: false,
        // 云店小程序
        checkedStoreApp: true,
        // 选品小程序
        checkSelectionGoods: false,
        // 小程序直播
        checkShopApp: true,
        // 抖音model
        checkedTikTok: false,
        // 快手model
        checkedQuick: false,
        // 淘宝model
        checkedTaobao: false,
        // 拼多多model
        checkedPinDuoDuo: false,
        // 1688model
        checkedOpenAlibaba: false,
        // 海关商品编码
        customsGoodsCodeData: []
      }
    },
    created() {
    },
    mounted() {
      const goodsBaseData = this.$store.state.goodsBaseData
      Object.assign(this.enterpriseConfig, goodsBaseData.enterpriseConfig)
      Object.assign(this.dict, goodsBaseData.dict)

      this.initForm()
    },
    methods: {
      // 初始化表单
      initForm() {
        if (this.goodsObj.goodsId || this.goodsObj.goodsSyncHistoryId) {
          Object.assign(this.form, this.goodsObj)
          this.form.goodsSource = this.form.goodsSource.toString()
          this.form.crossBorderType = this.form.crossBorderType.toString()
          this.form.crossBorderLabelType = this.form.crossBorderLabelType.toString()
          this.form.isDisabledSelCrossBorderType = this.form.isDisabledSelCrossBorderType.toString()
          // 云店小程序
          this.checkedStoreApp = this.form.storeAppGoodsType === 1
          // 选品库开关
          this.checkSelectionGoods = this.form.selectionGoodsType === 1
          // 小程序直播
          this.checkShopApp = this.form.anchorPlatformShopType === 1
          // 抖音小店
          this.checkedTikTok = this.form.tiktokAuthority === 1
          // 快手小店
          this.checkedQuick = this.form.quickAuthority === 1
          // 拼多多小店
          this.checkedPinDuoDuo = this.form.pinDuoDuoAuthority === 1
          // 淘宝小店
          this.checkedTaobao = this.form.taobaoAuthority === 1
          // 1688
          this.checkedOpenAlibaba = this.form.openAlibabaAuthority === 1
        }
        this.remoteMethod('', this.form.customsGoodsCodeId)
      },
      // 跨境类型切换事件
      doChangeCrossBorderType(value) {
        if (value === '2') {
          var errorList = []
          if (this.checkSelectionGoods) {
            errorList.push('【选品小程序】')
          }
          if (this.checkedTikTok) {
            errorList.push('【抖音小店】')
          }
          if (this.checkedQuick) {
            errorList.push('【快手小店】')
          }
          if (this.checkedTaobao) {
            errorList.push('【淘宝直播】')
          }
          if (this.checkedPinDuoDuo) {
            errorList.push('【拼多多小店】')
          }
          if (this.checkedOpenAlibaba) {
            errorList.push('【1688】')
          }
          if (errorList.length > 0) {
            const msg = '跨境商品，不能勾选' + errorList.join('、')
            this.$message({ type: 'error', message: msg })
            this.form.crossBorderType = '1'
            return
          }
        }
        this.emitChangeCrossBorderType(value)
      },
      // 平台切换事件
      doChangeAuthority() {
        // 云店小程序
        this.form.storeAppGoodsType = this.checkedStoreApp ? 1 : 0
        // 选品小程序
        this.form.selectionGoodsType = this.checkSelectionGoods ? 1 : 0
        // 小程序直播
        this.form.anchorPlatformShopType = this.checkShopApp ? 1 : 0
        // 抖音小店
        this.form.tiktokAuthority = this.checkedTikTok ? 1 : 0
        // 快手小店
        this.form.quickAuthority = this.checkedQuick ? 1 : 0
        // 淘宝小店
        this.form.taobaoAuthority = this.checkedTaobao ? 1 : 0
        // 拼多多小店
        this.form.pinDuoDuoAuthority = this.checkedPinDuoDuo ? 1 : 0
        // 1688
        this.form.openAlibabaAuthority = this.checkedOpenAlibaba ? 1 : 0

        this.emitChangeSelectionGoodsType(this.form.selectionGoodsType)

        const publicPlatfromAuthority = this.checkedTikTok || this.checkedQuick || this.checkedTaobao || this.checkedPinDuoDuo || this.checkedOpenAlibaba
        this.emitPublicPlatfromAuthority(publicPlatfromAuthority)
      },
      // 获取海关编码列表
      remoteMethod(query, codeId) {
        const customGoodsForm = {
          enterpriseId: this.getEnterpriseId(),
          size: 50,
          codeId: codeId,
          keyword: query
        }
        this.selectLoading = true
        pageCustomsGoodsCode(customGoodsForm).then(response => {
          this.selectLoading = false
          if (response.isError) return
          this.customsGoodsCodeData = response.data.records
        })
      },
      // 添加编码事件
      handleAddCustomsGoodsCode() {
        const routeData = this.$router.resolve({
          path: '/goods/customs-code/index',
          query: {}
        })
        window.open(routeData.href, 'newCustomsCode')
      },
      // 表单校验 true：成功 false：失败
      checkForm() {
        let ret = true
        this.$refs['form'].validate((valid, result) => {
          if (!valid) {
            const propKeys = Object.keys(result)
            this.$refs['form'].fields.forEach(field => {
              const index = propKeys.indexOf(field.prop)
              if (index !== -1) {
                this.$emit('addVaildShow', field)
              }
            })
            ret = false
          }
        })
        return ret
      },
      // 提交表单
      submitForm() {
        const submitForm = {
          crossBorderType: this.form.crossBorderType, // 跨境类型
          crossBorderLabelType: this.form.crossBorderLabelType, // 跨境标签类型
          customsGoodsCodeId: this.form.customsGoodsCodeId, // 海关商品编码id
          selectionGoodsType: this.form.selectionGoodsType, // 是否加入选品库：0未加入 1已加入
          storeAppGoodsType: this.form.storeAppGoodsType, // 是否加入云店：0未加入 1已加入
          anchorPlatformShopType: this.form.anchorPlatformShopType, // 是否加入小程序直播：0未加入 1已加入
          tiktokAuthority: this.form.tiktokAuthority, // 抖音小店权限 0关闭 1开启
          quickAuthority: this.form.quickAuthority, // 快手小店权限 0关闭 1开启
          taobaoAuthority: this.form.taobaoAuthority, // 淘宝直播权限 0关闭 1开启
          pinDuoDuoAuthority: this.form.pinDuoDuoAuthority, // 拼多多小店权限 0关闭 1开启
          openAlibabaAuthority: this.form.openAlibabaAuthority, // 1688权限 0关闭 1开启
          tiktokGoodsUrl: this.form.tiktokGoodsUrl, // 抖音小店商品链接
          quickGoodsUrl: this.form.quickGoodsUrl, // 快手小店商品链接
          taobaoGoodsUrl: this.form.taobaoGoodsUrl, // 淘宝直播商品链接
          pinDuoDuoGoodsUrl: this.form.pinDuoDuoGoodsUrl // 拼多多小店商品链接
        }
        return submitForm
      }
    }
  }
</script>

<style lang="less" scoped>
  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .vertical-radio {
    margin-bottom: 10px;
    .el-radio {
      padding-top: 15px;
      display: block;
    }
  }
</style>
